<template>
  <ElDrawer v-model="opened" :title="formType" size="60%" destroy-on-close>
    <ElSkeleton v-if="loading" animated :rows="10" />
    <ElForm v-else :model="form" ref="formRef" status-icon :disabled="isView">
      <div class="container">
        <div class="left-side">
          <div class="title"><span>物种调查信息</span></div>
          <div style="display: flex; padding-top: 20px">
            <div><UploadImg v-model:image-url="form.files!" :api="uploadAvatar"></UploadImg></div>
            <div style="font-size: smaller">
              <span class="span-block">中文名: {{ form.chName }}</span>
              <span class="span-block">学名: {{ form.scientificName }}</span>
              <span class="span-block">中文拼音: {{ form.chPinyin }}</span>
              <span class="span-block">{{ form.remark }}</span>
            </div>
          </div>
          <div style="padding-top: 20px; font-size: smaller">
            <span class="span-block">分类级别: {{ form.levelNames }}</span>
            <span class="span-side">物种分类: {{ form.typeLevelValue }}</span>
            <span class="span-side">是否旗舰物种: {{ form.isSpecies }}</span>
            <span class="span-side">国家保护等级: {{ form.protectionLevel }}</span>
            <br />
            <span class="span-side">CITES: {{ form.cites }}</span>
            <span class="span-side">IUCN: {{ form.iucn }}</span>
            <span class="span-block">旗舰物种顺序: {{ form.flagshipSpeciesSeq }}</span>
            <span class="span-side">物种位置: {{ form.latitudeLongitude }}</span>
          </div>
        </div>
        <div class="right-side">
          <div class="title"><span>图像信息</span></div>
          <div style="min-height: 240px" v-if="imageList.length > 0">
            <el-image
              style="width: 100%; height: 280px"
              :src="imageList[0].fileUrl"
              :zoom-rate="1.2"
              :preview-src-list="imageUrlList"
              :initial-index="0"
              fit="cover" />
          </div>
          <div style="min-height: 240px" class="empty" v-if="imageList.length == 0">
            <span>暂无图像信息</span>
          </div>
          <div style="display: flex; padding-top: 20px">
            <div class="left-side">
              <div class="title"><span>相关图片</span></div>
              <div v-if="imageList.length > 1">
                <div
                  v-for="(item, index) in imageList.slice(1)"
                  :key="'image_' + index"
                  :style="{ 'margin-top': (index !== 0 ? 10 : 0) + 'px' }">
                  <el-image
                    style="width: 100%; height: 140px"
                    :src="item.fileUrl"
                    :zoom-rate="1.2"
                    :preview-src-list="imageUrlList"
                    :initial-index="index + 1"
                    fit="cover" />
                  <div class="attach-time">上传时间: {{ item.createDateFormat }}</div>
                </div>
              </div>
              <div v-else class="empty"><span>暂无相关图片</span></div>
            </div>
            <div class="right-side">
              <div class="title"><span>相关视频</span></div>
              <div v-if="videoList.length > 0">
                <div
                  v-for="(item, index) in videoList"
                  :key="'video_' + index"
                  :style="{ 'margin-top': (index !== 0 ? 10 : 0) + 'px' }">
                  <video :src="item.fileUrl" controls style="width: 100%; height: 140px" />
                  <div class="attach-time">上传时间: {{ item.createDateFormat }}</div>
                </div>
              </div>
              <div v-else class="empty"><span>暂无相关视频</span></div>
            </div>
          </div>
        </div>
      </div>
    </ElForm>
    <template #footer>
      <ElButton @click="onCancelClicked">返回</ElButton>
    </template>
  </ElDrawer>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { ElForm, FormInstance } from 'element-plus'
import { AnimalPlant } from '@api/tby/summarize/animalPlant/interface'
import { FormType } from '@/enums'
import { getAnimalPlantDetail } from '@api/tby/summarize/animalPlant'
import { listDictByType } from '@api/uc/dict'
// import UploadImgs from '@/components/Upload/Imgs.vue'
import { uiUpload } from '@api/upload'
import type { UploadUserFile } from 'element-plus'
import UploadImg from '@/components/Upload/Img.vue'
import { SelectOption } from '@/api/interface'
import { EducationView, pageEducationView } from '@/api/modules/tby/education/educationView'

// import { ElMessage } from 'element-plus'
const fileList = ref<UploadUserFile[]>([])
const opened = ref(false)
const loading = ref(true)
// const isLLView = ref(false)
// const isLAView = ref(false)
const formType = ref<FormType>()
const formRef = ref<FormInstance>()
const form = ref<Partial<AnimalPlant.Form>>({})
// const parentOptions = ref<OptionType[]>([])
const protectionLevels = ref<SelectOption[]>([])
const flagshipSpeciesSeqs = ref<SelectOption[]>([])
const citesSelectData = ref<SelectOption[]>([])
const iucnSelectData = ref<SelectOption[]>([])
const imageUrlList = ref<string[]>([])
const imageList = ref<EducationView.Record[]>([])
const videoList = ref<EducationView.Record[]>([])

onMounted(async () => {
  console.log('进来了')
  // 国家保护等级
  getProtectionLevel()
  // 旗舰物种顺序
  getFlagshipSpeciesSeq()
  getCitesOption()
  getIucnOption()
})
// 国家保护等级 字典
const getProtectionLevel = () => {
  listDictByType('protection_level').then(resp => {
    const { data } = resp
    protectionLevels.value = data
  })
}
const getCitesOption = () => {
  listDictByType('cites').then(resp => {
    const { data } = resp
    citesSelectData.value = data
  })
}

const getIucnOption = () => {
  listDictByType('icun').then(resp => {
    const { data } = resp
    iucnSelectData.value = data
  })
}

// 旗舰物种顺序 字典
const getFlagshipSpeciesSeq = () => {
  listDictByType('flagship_species_seq').then(resp => {
    const { data } = resp
    flagshipSpeciesSeqs.value = data
  })
}
// 是否查看
const isView = computed(() => {
  return formType.value === FormType.VIEW
})

// 上传头像
function uploadAvatar(formData: FormData) {
  return uiUpload('files', formData)
}

const open = async (type: FormType, id?: number) => {
  fileList.value = []
  form.value = {}
  formType.value = type
  opened.value = true
  try {
    const { data } = await getAnimalPlantDetail(id!)
    loading.value = false
    for (let i = 0; i < protectionLevels.value.length; i++) {
      const item = protectionLevels.value[i]
      if (item.value == data.protectionLevel) {
        data.protectionLevel = item.label
        break
      }
    }
    for (let j = 0; j < flagshipSpeciesSeqs.value.length; j++) {
      const item = flagshipSpeciesSeqs.value[j]
      if (item.value == data.flagshipSpeciesSeq) {
        data.flagshipSpeciesSeq = item.label
        break
      }
    }
    for (let j = 0; j < iucnSelectData.value.length; j++) {
      const item = iucnSelectData.value[j]
      if (item.value == data.iucn) {
        data.iucn = item.label
        break
      }
    }
    for (let j = 0; j < citesSelectData.value.length; j++) {
      const item = citesSelectData.value[j]
      if (item.value == data.cites) {
        data.cites = item.label
        break
      }
    }
    if (data.isSpecies == '0') {
      data.isSpecies = '是'
    } else {
      data.isSpecies = '否'
    }
    form.value = data
  } finally {
    loading.value = false
  }
  formRef.value?.clearValidate()
  imageList.value = await loadEducationViewList(id!, 'IMAGE', 4)
  imageUrlList.value = []
  imageList.value.forEach(img => {
    imageUrlList.value.push(img.fileUrl)
  })
  videoList.value = await loadEducationViewList(id!, 'VIDEO', 3)
}

const loadEducationViewList = async (id: number, type: string, limit: number) => {
  let query: EducationView.Query = {
    category: 'WZ',
    type: type,
    current: 0,
    size: limit,
    businessId: id,
    order: 'create_time desc'
  }
  let { data } = await pageEducationView(query)
  return data.records
}

function close() {
  loading.value = true
  opened.value = false
  form.value = {}
}

const onCancelClicked = () => {
  close()
}

defineExpose({
  open,
  close
})
</script>

<style scoped lang="scss">
.container {
  display: flex;
}

.left-side {
  margin-right: 30px;
  flex: 1;
}

.right-side {
  flex: 1;
}

.title {
  padding: 5px 10px;
  line-height: 50px;
  font-weight: bold;
  background-color: #f9f9f9; /* 示例背景色 */
  border-right: 1px solid #eee; /* 示例分割线 */
}
.span-side {
  margin-left: 10px;
  line-height: 25px;
}
.span-block {
  margin-left: 10px;
  line-height: 25px;
  display: block;
}
.empty {
  padding-top: 20px;
  text-align: center;
}
.attach-time {
  border-bottom: 1px solid #dddddd;
  padding-bottom: 5px;
  font-size: 14px;
  text-align: center;
  width: 90%;
}
</style>
